<script>
export default {
    name: "Captcha",
    mounted() {
        const inputs = document.querySelectorAll('input'),
                button = document.querySelector('button')

        inputs.forEach((input, index) => {
            input.addEventListener('keyup', (e) => {
                const currentInput = input,
                        nextInput = input.nextSibling,
                        prevInput = input.previousSibling

                if (currentInput.value.length > 1) {
                    currentInput.value = ''
                    return
                }

                if (nextInput && nextInput.hasAttribute('disabled') && currentInput.value !== '') {
                    nextInput.removeAttribute('disabled')
                    nextInput.focus()
                }

                if (e.key === 'Backspace') {
                    inputs.forEach((item, i) => {
                        if (index <= i && prevInput) {
                            item.setAttribute('disabled', 'true')
                            currentInput.value = ''
                            prevInput.focus()
                        }
                    })
                }

                if (!inputs[3].disabled && !inputs[3].value !== '') {
                    button.classList.add('active')
                    return;
                }
                button.classList.remove('active')
            })
        })

        window.addEventListener('load', () => {
            inputs[0].focus()
        })
    }
}
</script>

<template>
    <div class="box">
        <div class="container">
            <header>
                <i class="bx bxs-check-shield"></i>
            </header>
            <h4>Enter Captcha</h4>
            <form action="#">
                <div class="input-field">
                    <input type="number"/>
                    <input type="number" disabled/>
                    <input type="number" disabled/>
                    <input type="number" disabled/>
                </div>
                <button>Verify</button>
            </form>
        </div>
    </div>
</template>

<style scoped lang="less">
.box {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #4070f4;

    :where(.container, form, .input-field, header) {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .container {
        background: #ffffff;
        padding: 30px 65px;
        border-radius: 12px;
        row-gap: 20px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);

        header {
            height: 65px;
            width: 65px;
            background: #4070f4;
            color: #ffffff;
            font-size: 2.5rem;
            border-radius: 50%;
        }

        h4 {
            font-size: 1.25rem;
            color: #333333;
            font-weight: 500;
        }

        form {

            .input-field {
                flex-direction: row;
                column-gap: 10px;

                input {
                    height: 45px;
                    width: 42px;
                    border-radius: 6px;
                    outline: none;
                    border: 1px solid #ddd;
                    text-align: center;
                    font-size: 1.125rem;
                }

                input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
                    display: none;
                }
            }

            button {
                margin-top: 25px;
                width: 100%;
                background: #6e93f7;
                color: #ffffff;
                font-size: 1rem;
                border: none;
                padding: 9px 0;
                border-radius: 6px;
                cursor: pointer;
                transition: all 0.2s ease;
                pointer-events: none;
            }

            button.active {
                background: #4070f4;
                pointer-events: auto;
            }

            button:hover {
                background: #0e4bf1;
            }
        }
    }
}
</style>